<template>
  <div class="w-[100%]">
    <!-- <CustomTitle title="表金属杂质检测数据" /> -->
    <a-table
      id="tableRef"
      :scroll="{ y: 370, x: '100%' }"
      ref="tableRef"
      :loading="loading"
      class
      :pagination="false"
      :columns="columns"
      :data-source="tableData"
    >
    </a-table>
    <!-- <a-table ref="tableRef" :scroll="{ y: 200, x: '100%' }" :loading="loading" class :pagination="false" :columns="columns" :data-source="data"> </a-table> -->
  </div>
</template>
<script setup lang="ts">
import { apiReports } from '@/http/api/controller_status';
import { default_columns } from './columns';
import * as XLSX from 'xlsx';
import FileSaver from 'file-saver';

let timer: any = null;
const columns: any = default_columns;
const data = ref<any[]>([]);
const tableData = ref<any[]>([]);
const loading = ref(false);
const tableRef = ref('');
const getData = async () => {
  try {
    loading.value = true;
    const res = await apiReports();
    data.value = res.data;
    tableData.value = res.data;
    data.value = [
      [
        '样品编号',
        '分析日期',
        '样品名称',
        '批号',
        '取样时间',
        '6元素金属',
        '10元素金属',
        '12元素金属',
        '13元素金属',
        '15元素金属',
        '表金属杂质元素(ppbw)',

        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '计算值',
        '样品重量',
        '酸液重量',
      ],
      [
        '样品编号',
        '分析日期',
        '样品名称',
        '批号',
        '取样时间',
        '6元素金属',
        '10元素金属',
        '12元素金属',
        '13元素金属',
        '15元素金属',
        'Na',
        'Mg',
        'Al',
        'K',
        'Ca',
        'Cr',
        'Fe',
        'Ni',
        'Cu',
        'Zn',
        'Co',
        'Mn',
        'W',
        'Ti',
        'Mo',
        '计算值',
        '样品重量',
        '酸液重量',
      ],
      // {
      //   sampleID: '11',
      //   analysisTime: '123',
      //   sampleName: '',
      //   batchID: '',
      //   analysisType: '',
      //   '6_ppbw': 'ee',
      //   '10_ppbw': '2323',
      //   '12_ppbw': '11.00',
      //   '13_ppbw': '1',
      //   '15_ppbw': '',
      //   Na: '2',
      //   Mg: '3',
      //   Al: '4',
      //   K: '5',
      //   Ca: '6',
      //   Cr: '',
      //   Fe: 't',
      //   Ni: '',
      //   Cu: '',
      //   Zn: '',
      //   Co: '',
      //   Mn: '',
      //   W: '',
      //   Ti: '',
      //   Mo: '',
      //   sampleWeightVol: '1',
      //   finalWeightVol: '1',
      //   value: '2',
      //   sampleWeight: '3',
      //   acidWeight: '3',
      // },
    ];
    res.data.forEach((element: any) => {
      data.value.push([
        element.sampleID,
        element.analysisTime,
        element.sampleName,
        element.batchID,
        element.samplingTime,
        saveThree(element['6_ppbw']),
        saveThree(element['10_ppbw']),
        saveThree(element['12_ppbw']),
        saveThree(element['13_ppbw']),
        saveThree(element['15_ppbw']),
        saveThree(element['Na']),
        saveThree(element['Mg']),
        saveThree(element['Al']),
        saveThree(element['K']),
        saveThree(element['Ca']),
        saveThree(element['Cr']),
        saveThree(element['Fe']),
        saveThree(element['Ni']),
        saveThree(element['Cu']),
        saveThree(element['Zn']),
        saveThree(element['Co']),
        saveThree(element['Mn']),
        saveThree(element['W']),
        saveThree(element['Ti']),
        saveThree(element['Mo']),
        saveThree(element['value']),
        saveThree(element['sampleWeight']),
        saveThree(element['acidWeight']),
      ]);
    });
    // data.value = [
    //   ['S', 'h', 'e', 'e', 't', 'J', 'S'],
    //   [null, 2, , , 5, 6, 7],
    //   [null, 3, , , 6, 7, 8],
    //   [3, 4, , , 7, 8, 9],
    //   [4, 5, 6, 7, 8, 9, 0],
    // ];
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
function saveThree(value: string) {
  const re = /^(\-?\d+\.\d{1,3})\d*$/.exec(value);
  if (re) {
    return re[1];
  }
  return value;
}

const exportData = () => {
  const workBook = XLSX.utils.book_new();
  // const ws1 = XLSX.utils.table_to_sheet(document.querySelector('#tableRef'));

  const ws1 = XLSX.utils.aoa_to_sheet(data.value);

  if (!ws1['!merges']) ws1['!merges'] = [];
  ws1['!merges']?.push(
    ...[
      { s: { c: 0, r: 0 }, e: { r: 1, c: 0 } },
      {
        s: { c: 1, r: 0 },
        e: { c: 1, r: 1 },
      },
      {
        s: { c: 2, r: 0 },
        e: { c: 2, r: 1 },
      },
      {
        s: { c: 3, r: 0 },
        e: { c: 3, r: 1 },
      },
      {
        s: { c: 4, r: 0 },
        e: { c: 4, r: 1 },
      },
      {
        s: { c: 5, r: 0 },
        e: { c: 5, r: 1 },
      },
      {
        s: { c: 6, r: 0 },
        e: { c: 6, r: 1 },
      },
      {
        s: { c: 7, r: 0 },
        e: { c: 7, r: 1 },
      },
      {
        s: { c: 8, r: 0 },
        e: { c: 8, r: 1 },
      },
      {
        s: { c: 9, r: 0 },
        e: { c: 9, r: 1 },
      },
      {
        s: { c: 10, r: 0 },
        e: { c: 25, r: 0 },
      },
      {
        s: { c: 26, r: 0 },
        e: { c: 26, r: 1 },
      },
      {
        s: { c: 27, r: 0 },
        e: { c: 27, r: 1 },
      },
      {
        s: { c: 28, r: 0 },
        e: { c: 28, r: 1 },
      },
    ]
  );
  XLSX.utils.book_append_sheet(workBook, ws1, '表金属杂质检测数据');
  const wbOut = XLSX.write(workBook, { bookType: 'xlsx', type: 'array', bookSST: true });
  try {
    FileSaver.saveAs(new Blob([wbOut], { type: 'application/octet-stream' }), '表金属杂质检测数据.xlsx');
  } catch (error) {
    console.log(error);
  }
};
defineExpose({
  exportData,
  refresh: getData,
});
const queryData = async () => {
  // if (timer) {
  //   getData();
  //   return;
  // }
  // timer = setInterval(() => {
  //   getData();
  // }, 60 * 1000);
  getData();
};
onBeforeMount(() => {
  queryData();
});
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
});
</script>
<style lang="less" scoped>
:deep(.ant-table-thead > tr:nth-child(1) > th) {
  &:nth-child(6),
  &:nth-child(7),
  &:nth-child(8),
  &:nth-child(9),
  &:nth-child(10) {
    color: #53dcff !important;
  }
  &:nth-child(11) {
    color: #ff9f00 !important;
  }
}
:deep(.ant-table-thead > tr:nth-child(1) > th) {
  &:nth-child(1),
  &:nth-child(2),
  &:nth-child(3),
  &:nth-child(4),
  &:nth-child(5) {
    background-color: #1b1b1b !important;
    color: white !important;
  }
}
:deep(.ant-table-thead > tr:nth-child(2) > th) {
  color: #ff9f00 !important;
}
:deep(.ant-table-tbody > tr > td) {
  // &:nth-child(4),
  // &:nth-child(5),
  &:nth-child(6),
  &:nth-child(7),
  &:nth-child(8),
  &:nth-child(9),
  &:nth-child(10) {
    color: #53dcff !important;
  }
  &:nth-child(11) {
    color: #ff9f00 !important;
  }
}
:deep(.ant-table-tbody > tr > td) {
  &:nth-child(11),
  &:nth-child(12),
  &:nth-child(13),
  &:nth-child(14),
  &:nth-child(15),
  &:nth-child(16),
  &:nth-child(17),
  &:nth-child(18),
  &:nth-child(18),
  &:nth-child(19),
  &:nth-child(20),
  &:nth-child(21),
  &:nth-child(22),
  &:nth-child(23),
  &:nth-child(24),
  &:nth-child(25) {
    color: #ff9f00 !important;
  }
}
</style>
